import React, { Component } from 'react';
import 'antd/dist/antd.css';
import store from'./store';
import {getInputState, getAddItem, getDeleteItem, INITLISTACTION, getTodoList} from './store/actionCreators'
import TodoListUi from './TodoListUi';





class TodoList extends Component{
    constructor(props) {
        super(props);
        // store.getState()  拿到store里数据
        this.state=store.getState()
        this.handleDelete=this.handleDelete.bind(this)
    store.subscribe(this.changeState)//订阅subscribe(函数)   组件去订阅组件，如果store数据改变，自动执行handleStoreChange函数

    }
    render() {
        return <TodoListUi
            inputValue={this.state.inputValue}
            handleChange={this.handleChange}
            handleBtn={this.handleBtn}
            list={this.state.list}
            handleDelete={this.handleDelete}
        />
    }
    componentDidMount() {
     const action=getTodoList();//当store 接收到的action是个函数的时候，store就会自动执行这个函数
      store.dispatch(action);//使用thunk中间件实现ajax请求。。原理：使用记住redux流程图，始终离不开 action的创建，store的派发。
    }

    handleChange=(e)=>{
        const action=getInputState(e.target.value)
        store.dispatch(action);
    }
    handleBtn=()=>{
        const action=getAddItem();
        store.dispatch(action);
    }
    handleDelete=(index)=>{
        const action=getDeleteItem(index);
        store.dispatch(action);
    }

    changeState=()=>{
        this.setState(store.getState());
    }
}

export default TodoList


//箭头函数简写 当函数仅有一个表达式的时候，可以省略{}和return
// var who=name=>'hello'+name
// 若要使用单行箭头函数直接返回一个对象字面量，请使用一个括号包裹改对象字面量，
// var handleChange=(index)=>({
//     type:'input_change',
//     index
// })


// ui 组件（傻瓜组件）负责渲染  容器组件（聪明组件）负责逻辑



